
import React, { useEffect, useState } from "react";

import img from "../../assets/images/search-bg.jpg"
import logo from "../../assets/images/logo.jpg"
import styles from "./ResultPage.module.css";
import { Button, Divider, Radio, Typography, Form, Input, Pagination, Empty } from "antd";
import { PhoneOutlined, UserOutlined } from "@ant-design/icons";
import { useNavigate, useLocation } from "react-router-dom"
import axios from "axios";
import info from "../../assets/images/info.png"
export const ResultPage: React.FC = (props: any) => {
  const navigate = useNavigate();
  const { state } = useLocation();
  const [list, setList] = useState<Array<any>>([])
  const [total, setTotal] = useState<number>(0)
  useEffect(() => {
    if (state.sea) {
      const flag = `?code=${state.sea}&pageNum=1&pageSize=10`
      axios.post('http://42.193.113.4:9091/v1/search' + flag, {

      })
        .then((response: any) => {
          console.log(response)
          if (response.data.code === 20000) {
            setList(response.data.data.data)
            setTotal(response.data.data.total)
          }
        })
        .catch((error) => {
          console.log(error);
        });
    }
  }, [])

  const onChange = (e) => {
    const flag = `?code=${state.sea}&pageNum=${e}&pageSize=10`
    axios.post('http://42.193.113.4:9091/v1/search' + flag, {

    })
      .then((response: any) => {
        console.log(response)
        if (response.data.code === 20000) {
          setList(response.data.data.data)
          setTotal(response.data.data.total)
        }
      })
      .catch((error) => {
        console.log(error);
      });
  }

  const goBack = () => {
    navigate("/")
  }
  const goDetail = (item: any) => {
    navigate(
      '/detail',
      { state: { id: item.id } }
    )
  }
  return (
    <div>
      <div className={styles["top-header"]}>
        <div className={styles.inner}>
          <Radio.Button value="large" style={{ marginRight: "20px" }} onClick={() => { goBack() }}>返回首页</Radio.Button>
          <Typography.Text>搜索结果</Typography.Text>
        </div>
      </div>
      <div className={styles["header-content"]}>
        <div>
          <img className={styles["logo"]} src={logo}></img>
        </div>
        <div>
          <div>
            <Divider>一站式服务品质创意团队服务商</Divider>
          </div>
          <div>定制 <Divider type="vertical" />创意 <Divider type="vertical" />体验</div>
        </div>
        <div className={styles["phone-cxt"]}>
          <PhoneOutlined style={{ fontSize: "54px", color: "#1e80ff" }} />
          <div className={styles["phone-num"]}>
            <div>咨询热线：</div>
            <div>18629429514</div>
          </div>
        </div>
      </div>
      <div className={styles["top-content"]}>
        <img className={styles["image"]} src={img}></img>
      </div>
      <div className={styles['list-box-pen']}>
        <div className={styles['list-box']}>
          {
            list.length > 0 ? list.map((item, index) => {
              return <div key={index} className={styles['list-info']}>
                <div className={styles['product']}>
                  <img className={`${styles.productimg} ${styles.producthover}`} src={item.titleUrl}></img>
                  <div className={`${styles.info} ${styles.box}`}>
                    <h2>{item.name}</h2>
                    <div className={`${styles.tag}`}>
                      {
                        item.label.split(",").map((items, index) => {
                          return <span key={index} className={`${styles['tag-box']}`}>{items}</span>
                        })
                      }
                    </div>
                    <div className={styles['info-desc']}>
                      <div>
                        适合团队: {item.team}
                      </div>
                      <div>
                        推荐季节: {item.times}
                      </div>
                      <div className={styles['desc-text']}>
                        推荐理由: {item.reason}
                      </div>
                      <div className={styles['menubtn']}>
                        <Button type="primary" shape="round" onClick={() => { goDetail(item) }}>查看更多</Button>
                      </div>

                    </div>
                  </div>
                </div>
              </div>
            }) : <div style={{ width: "860px" }}>
              <Empty description="暂无数据"></Empty>
            </div>
          }
          {list.length > 0 && <Pagination defaultCurrent={1} total={total} onChange={onChange} />}
        </div>
        <div className={`${styles['form-menu']}`}>
          <div className={styles['title']}>
            <span className={styles['made-title1']}></span>
            <span className={styles['made-title2']}></span>
            免费定制方案
          </div>

          <Form name="control-ref">
            <Form.Item
              name="username"
              rules={[{ required: true, message: '请输入' }]}
            >
              <Input placeholder="团建人数" />
            </Form.Item>
            <Form.Item
              name="username"
              rules={[{ required: true, message: '请输入' }]}
            >
              <Input placeholder="联系人" />
            </Form.Item>
            <Form.Item
              name="username"
              rules={[{ required: true, message: '请输入' }]}
            >
              <Input placeholder="手机号码" />
            </Form.Item>
            <Form.Item
              name="username"
              rules={[{ required: true, message: '请输入' }]}
            >
              <Input placeholder="特殊需求" />
            </Form.Item>
            <Form.Item>
              <Button className={styles['submit-btn']} type="primary" htmlType="submit">
                提交定制需求
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>

    </div>
  )
}